<template>
  <div>
    <div class="app-container">
      <el-form ref="postForm" :model="postForm" :label-position="'right'" label-width="80px">
        <el-row type="flex" justify="space-between" :gutter="20">
          <el-col :span="6">
            <el-form-item label="名称:">
              <el-input v-model="postForm.searchName" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" size="small" @click="query()">查询</el-button>
              <el-button type="warning" size="small" @click="addInfo()">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="tableData"
        border
      >
        <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="名称"
        />
        <el-table-column
          prop="pName"
          header-align="center"
          align="center"
          label="上级商业集团名称"
        />
        <el-table-column
          prop="type"
          header-align="center"
          align="center"
          label="类型"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 0" size="small">商业集团</el-tag>
            <el-tag v-else-if="scope.row.type === 1" size="small">门店</el-tag>
            <el-tag v-else size="small">路店</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="button"
              class="el-button el-button--primary el-button--mini"
              @click="editInfo(scope.$index,scope.row)"
            >编辑
            </el-button>
            <el-button
              type="button"
              class="el-button el-button--danger el-button--mini"
              @click="delInfo(scope.$index, scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" class="row-bg" justify="center">
        <el-pagination
          background
          layout="total,  prev, pager, next, jumper"
          :total="total"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      center
    >
      <el-form ref="info" :rules="rules" :model="info" label-position="left" label-width="200px">
        <el-form-item label="名称:" prop="name">
          <el-input v-model="info.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="类型:" prop="type">
          <el-select v-model="info.type" placeholder="请选择">
            <el-option key="0" label="商业集团" value="0" />
            <el-option key="1" label="门店" value="1" />
            <el-option key="2" label="路店" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="上级集团:" v-if="info.type !== '0'">
          <el-select v-model="info.businessGroups" @change="getStoreList" placeholder="请选择">
            <el-option
              v-for="group in businessGroupList"
              :key="group.id"
              :label="group.name"
              :value="group.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上级门店:"  v-if="info.type === '2'">
          <el-select v-model="info.store" placeholder="请选择">
            <el-option
              v-for="item in storeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrEdit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { addOrEdit, delInfo, getInfo, page, getGroupList } from '@/api/system/sysGroup.js'

  export default {
    data() {
      return {
        // 总条数
        total: 0,
        // 每页显示个数
        pageSize: 10,
        // 页码
        currentPage: 1,
        postForm: { searchName: '' },
        info: {},
        tableData: [],
        options: [],
        editIndex: 0,
        centerDialogVisible: false,
        title: '新增',
        businessGroupList: [],
        storeList: [],
        rules: {
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          type: [{ required: true, message: '请选择类型', trigger: 'blur' }]
        }
      }
    },
    created() {
      this.getData()
      this.getBusinessGroup()
    },
    methods: {
      // 分页查询
      handleCurrentChange(val) {
        this.currentPage = val
        this.getData()
      },
      // 查询条件
      query() {
        this.currentPage = 1
        this.getData()
      },
      getData() {
        // 请求分页参数
        page(this.pageSize, this.currentPage, this.postForm.searchName).then(response => {
          this.total = response.count
          this.tableData = response.data
        })
      },
      // 新增
      addInfo() {
        this.title = '新增'
        this.info = {}
        this.centerDialogVisible = true
      },
      /**
       * 编辑
       * @param row
       */
      editInfo(index, row) {
        this.editIndex = index
        this.title = '编辑'
        this.centerDialogVisible = true
        getInfo(row.id).then(response => {
          this.info = response.data
          this.info.type = this.info.type + ''
          this.getStoreList()
        })
      },
      addOrEdit: function() {
        this.$refs['info'].validate((valid) => {
          if (valid) {
            if (this.info.type === '1') {
              this.info.pId = this.info.businessGroups
            } else if (this.info.type === '2') {
              this.info.pId = this.info.store
            }
            addOrEdit(this.info.id, this.info.name, this.info.type, this.info.pId).then(response => {
              this.centerDialogVisible = false
              if (this.info.id == null) {
                // 新增
                this.tableData.unshift(response.data)
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
              } else {
                // 编辑
                this.tableData.splice(this.editIndex, 1, response.data)
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      delInfo(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delInfo(row.id).then(response => {
            this.tableData.splice(index, 1)
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
        })
      },
      getBusinessGroup() {
        getGroupList(0).then(response => {
          this.businessGroupList = response.data
        })
      },
      getStoreList() {
        getGroupList(1, this.info.businessGroups).then(response => {
          this.storeList = response.data
        })
      }
    }
  }
</script>

